<template>
  <a-card class="safe-card">
    <template #title>
      <Icon :icon="icon" />
      {{ title }}
    </template>
    <a-space direction="vertical" size="large">
      <div class="safe-status">状态: <a-tag :color="status ? 'green' : 'red'">{{ status ? '已设置' : '未设置' }}</a-tag></div>
      <div class="safe-desc">密码用于登录和注册博客系统，同时是您的重要凭证，请注意保存</div>
      <div class="extra">
        <slot name="extra"></slot>
      </div>
    </a-space>
  </a-card>
</template>

<script setup>
import {Icon} from "../../Icon/Icon";

defineProps({
  icon: {
    type: String,
    required: true,
    default: 'KeyOutlined'
  },
  status: {
    type: Boolean,
    required: true,
    default: false
  },
  desc: {
    type: String,
    required: true,
    default: ''
  },
  title: {
    type: String,
    required: true,
    default: ''
  }
})
</script>

<style scoped>
.safe-desc {
  color: #999999;
}
</style>